//短视频播放和关闭
document.querySelector('.video ul').onclick=function(){
    document.body.style.overflow='hidden'
    document.querySelector('.video-wrapper').style.display='block'
}
document.querySelector('.video-wrapper .close').onclick=function(){
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'
    document.querySelector('.video-wrapper video').pause()
}

//单张追加li和其中图片
let cols=[
    {left:0,top:0},
    {left:254,top:0},
    {left:254*2,top:0},
    {left:254*3,top:0},
]
videoHeight=0      //储存环到最后一次时的图片top


function waterFall(){
    for (let num=1; num<=56; num++) 
    {
        // 循环里面造li标签 - 追加到页面即可
        let liObj = document.createElement('li')
        liObj.style.position = 'absolute' 
        // liObj.style.display = 'none'
        liObj.innerHTML = `
            <div>
                <img src="./assets/imgs2/${num}.jpg" alt="">
            </div>
            <span>${num} 初秋絮语，用音乐记下你的点点滴滴</span>
            <p>
                <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
            </p>
        `
        document.querySelector('.video ul').appendChild(liObj)   //追加完毕
        
    //追加后找最短的图片改变位置到下面
        liObj.querySelector('img').onload=function(){
            let minHeightIndex=0
            cols.forEach((item,i)=>{
                if(cols[minHeightIndex].top>item.top) minHeightIndex=i
            })
            liObj.style.display='block'
            liObj.style.left=cols[minHeightIndex].left+'px'   //改变追加的图片位置
            liObj.style.top=cols[minHeightIndex].top+'px'
            cols[minHeightIndex].top+=liObj.offsetHeight   //改变后追加图片位置之后更新cols中对应位置的占用的top
        
            videoHeight=cols[minHeightIndex].top  //即循环到最后一次时的图片top
        }
    }    
}
// JS-无限滚动
// 1 监控滚动条变化
// 2 事件处理函数中 - 获取默认可见视口高度 + 滚动条滚动高度
// 3 事件处理函数中 - 判断    2>=最后一个图片的top 旧得重新生成追加图片
window.onscroll=function(){
    let clientHeight=window.innerHeight || document.documentElement.clientHeight
    let scrollHeight=document.body.scrollTop || document.documentElement.scrollTop
    if(clientHeight+scrollHeight>=videoHeight){
        waterFall()
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`,'color:red;font-size:25px;')
    }
}
window.onload=waterFall
// window.addEventListener('load',waterFall)